<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Styles -->
    <link href="bootstrap-1.1.1.css" rel="stylesheet">

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    
    
    <!-- Scripts: inc. TableSorter -->
        <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>
  </head>

  <body>


    <!-- The top navigation menu -->
   <div class="topbar">
    <div class="fill">
        <div class="container">
            <h3><a href="#">WebDesignTuts+</a></h3>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Weekly Polls</a></li>
          </ul>
          <form action="">
            <input type="text" placeholder="Search" />
          </form>
          <ul class="nav secondary-nav">
            <li class="menu">
                <a href="#" class="menu">Lorem ipsum</a>
                <ul class="menu-dropdown">
                    <li><a href="#">Dolor sit</a></li>
                    <li><a href="#">Amet Consequeter</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Enough with the Latin</a></li>
                </ul>
            </li>
          </ul>
        </div>
    </div>
</div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        <p><a class="btn primary large">Learn more &raquo;</a></p>
      </div>
      
      <!-- Example row of columns -->
      <div class="row">
        <div class="span11">
       <div class="alert-message block-message error">
    <a class="close" href="#">&times;</a>
    <p><strong>Lorem ipsum dolor sit amet!</strong> Fusce interdum euismod tempor. In hac habitasse platea dictumst. Duis id augue est, vel viverra velit. Quisque adipiscing sem et nulla dapibus consequat. Nam volutpat quam nec purus convallis cursus.</p>
    <div class="alert-actions">
        <a href="#" class="btn small">Lorem ipsum dolor</a>
        <a href="#" class="btn small">Sit amet</a>
    </div>
</div>
          <h2>Hello world! <small>and a table</small></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum euismod tempor. In hac habitasse platea dictumst. Duis id augue est, vel viverra velit. Quisque adipiscing sem et nulla dapibus consequat. Nam volutpat quam nec purus convallis cursus. Etiam dictum urna vel augue dignissim ac tincidunt velit commodo. Etiam vitae augue erat. Nam ut elit nunc, vel varius quam. Etiam neque massa, ullamcorper eu feugiat sed, aliquet feugiat lectus. Integer aliquam rhoncus velit a vehicula. Quisque malesuada feugiat posuere. Aliquam consectetur, dolor et tristique vulputate, dui neque luctus magna, sed sodales metus lectus vel risus.</p>
<!-- TableSorter -->
<script>
  $(function() {
    $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
  });
</script>
<!-- The table -->
<table class="zebra-striped" id="sortTableExample">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
        </tr>
    </tbody>
</table>
<p>Suspendisse pellentesque placerat felis, at commodo tortor porta at. Nulla ut justo a neque sollicitudin scelerisque non in lorem. Phasellus ut magna vitae est bibendum imperdiet. Cras a sollicitudin mauris. Duis ut nulla ipsum. Donec consectetur pellentesque nibh vel adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque mattis felis vel metus interdum ut pharetra felis pulvinar. Quisque eu libero neque. Maecenas felis arcu, interdum sit amet tincidunt id, consequat vitae justo. Etiam laoreet rutrum purus in facilisis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque volutpat aliquam cursus. Curabitur ipsum purus, aliquam sed sodales eu, viverra sit amet ipsum. Nunc rhoncus fermentum felis, et sagittis ligula eleifend id.</p>

<p>Suspendisse pellentesque placerat felis, at commodo tortor porta at. Nulla ut justo a neque sollicitudin scelerisque non in lorem. Phasellus ut magna vitae est bibendum imperdiet. Cras a sollicitudin mauris. Duis ut nulla ipsum. Donec consectetur pellentesque nibh vel adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque mattis felis vel metus interdum ut pharetra felis pulvinar. Quisque eu libero neque. Maecenas felis arcu, interdum sit amet tincidunt id, consequat vitae justo. Etiam laoreet rutrum purus in facilisis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque volutpat aliquam cursus. Curabitur ipsum purus, aliquam sed sodales eu, viverra sit amet ipsum. Nunc rhoncus fermentum felis, et sagittis ligula eleifend id.</p>

<!-- Pagination -->
<div class="pagination">
    <ul>
        <li class="prev disabled"><a href="#">&larr; Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="disabled"><a href="#">...</a></li>
        <li><a href="#">98</a></li>
        <li><a href="#">99</a></li>
        <li><a href="#">100</a></li>
        <li><a href="#">101</a></li>
        <li><a href="#">102</a></li>
        <li class="next"><a href="#">Next &rarr;</a></li>
    </ul>
</div>
        </div>
        
        <!-- This begins the second column -->
        <div class="span5">
          <h2>Lorem ipsum</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<ul class="tabs">
  <li class="active"><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Dolor</a></li>
</ul>
<p>Aenean tempor vulputate ipsum tempus elementum. Sed sit amet ligula nulla, non molestie lectus. Quisque felis lectus, pharetra dapibus semper id, vulputate sed ipsum. Pellentesque tincidunt pulvinar rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
       </div>
      </div>

    <!-- Footer -->
      <footer>
        <p>&copy; Company 2011</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
